import { defineComponent, onMounted, ref } from "vue";
import Scroll from '../Scroll'
import './style.scss'


export default defineComponent({
  name: 'ScrollRow',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      required: true
    },
    handleClick: {
      type: Function
    }
  },
  setup(props) {
    const categoryDOM = ref(null)

    const renderList = () => props.list.map((item) => <span onClick={() => props.handleClick(item.key)}>{ item.name }</span>)

    onMounted(() => {
      let tagElems = categoryDOM.value.querySelectorAll('span');
      let totalWidth = 0;
      Array.from(tagElems).forEach(ele => {
        totalWidth += ele.offsetWidth;
      });
      totalWidth += 2;
      categoryDOM.value.parentNode.style.width = `${totalWidth}px`;
    })

    return () => (
      <Scroll scrollX={true}>
        <div className="scroll-row-list" ref={categoryDOM}>
          <span>{ props.title }</span>
          { renderList() }
        </div>
      </Scroll>
    )
  }
})